<template>
	<!-- 列表内容 -->
    <div class="wrapper">
        <!-- Breadcrumb Area Start Here -->
        <div class="breadcrumb-area">
            <div class="container">
                <ol class="breadcrumb breadcrumb-list">
                    <li class="breadcrumb-item">
                        <NuxtLink to="/">Home</NuxtLink>
                    </li>
                    <li class="breadcrumb-item active">{{ searchName }}</li>
                </ol>
            </div>
        </div>
        <!-- Breadcrumb Area End Here -->
        <!-- Shop Page Start -->
        <div class="main-shop-page ptb-80">
            <div class="container">
                <!-- Row Start -->
                <div class="row">
                    <!-- Product Categorie List Start -->
                    <div class="col-lg-12 order-1 order-lg-12">
                        <!-- Grid & List View Start -->
                        <div class="grid-list-top border-default universal-padding d-md-flex justify-content-md-between align-items-center mb-30">
                            <div class="grid-list-view d-flex align-items-center  mb-sm-15">
                                <ul class="nav tabs-area d-flex align-items-center">
                                    <li>
                                        <a class="active" data-toggle="tab" href="#grid-view">
                                            <i class="fa fa-th"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a data-toggle="tab" href="#list-view">
                                            <i class="fa fa-list-ul"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!-- Toolbar Short Area Start -->
                            <!-- Toolbar Short Area End -->
                        </div>
                        <!-- Grid & List View End -->
                        <div class="shop-area mb-all-40">
                            <!-- Grid & List Main Area End -->
                            <div class="tab-content">
                                <div id="grid-view" class="tab-pane fade show active">
                                    <div class="row border-hover-effect ">
                                        <div class="col-lg-4 col-md-4 col-sm-6 col-6" v-for="item in contentList.list" :key="item.id">
                                            <!-- Single Product Start -->
                                            <div class="single-ponno-product">
                                                <!-- Product Image Start -->
                                                <div class="pro-img">
                                                    <NuxtLink :to="`/product/${item.id}`" target="_blank">
                                                        <img class="primary-img" :src="item.img" :alt="item.title">
                                                    </NuxtLink>
                                                    <span class="sticker-sale">New</span>
                                                </div>
                                                <!-- Product Image End -->
                                                <!-- Product Content Start -->
                                                <div class="pro-content">
                                                    <div class="pro-info">
                                                        <h4>
                                                            <NuxtLink :to="`/product/${item.id}`" target="_blank">{{ item.title }}</NuxtLink>
                                                        </h4>
                                                        <p>
                                                            <span class="special-price">${{ item.price }}</span>
                                                        </p>
                                                    </div>
                                                </div>
                                                <!-- Product Content End -->
                                            </div>
                                            <!-- Single Product End -->
                                        </div>
                                    </div>
                                    <!-- Row End -->
                                </div>
                                <!-- #grid view End -->
                                <div id="list-view" class="tab-pane fade fix">
                                    <!-- Single Product Start -->
                                    <div class="single-ponno-product" v-for="item in contentList.list" :key="item.id">
                                        <!-- Product Image Start -->
                                        <div class="pro-img">
                                            <NuxtLink :to="`/product/${item.id}`">
                                                <img class="primary-img" :src="item.img" :alt="item.title">
                                            </NuxtLink>
                                        </div>
                                        <!-- Product Image End -->
                                        <!-- Product Content Start -->
                                        <div class="pro-content">
                                            <div class="pro-info">
                                                <h4>
                                                    <NuxtLink :to="`/product/${item.id}`">
                                                        {{ item.title }}
                                                    </NuxtLink>
                                                </h4>
                                                <p>
                                                    <span class="special-price">${{ item.price }}</span>
                                                </p>
                                                <p>{{ item.intro }}</p>
                                            </div>
                                        </div>
                                        <!-- Product Content End -->
                                    </div>
                                    <!-- Single Product End -->
                                </div>
                                <!-- #list view End -->
                            </div>
                            <!-- Grid & List Main Area End -->
                        </div>
                        <!-- Shop Breadcrumb Area Start -->
                        <div class="shop-breadcrumb-area border-default">
                            <div class="row">
                                <!-- <div class="col-lg-4 col-md-4 col-sm-5">
                                    <span class="show-items">Showing 1-12 of 13 item(s) </span>
                                </div> -->
                                <div class="col-lg-8 col-md-8 col-sm-7">
                                    <client-only placeholder="loading...">
                                        <n-space vertical>
                                            <n-pagination v-model:page="currentPage" :page-count="pageTotal" :page-slot="5" :on-update:page="goto">
                                            </n-pagination>
                                        </n-space>
                                    </client-only>
                                    
                                </div>
                            </div>
                        </div>
                        <!-- Shop Breadcrumb Area End -->
                    </div>
                    <!-- product Categorie List End -->
                </div>
                <!-- Row End -->
            </div>
            <!-- Container End -->
        </div>
        <!-- Shop Page End -->
    </div>
</template>

<script lang="ts" setup>
import { IColumnDetail } from 'models/IColumn'
import { IArticleList } from 'models/IArticle'
import ICategory from 'models/ICategory'

const route = useRoute()
const router = useRouter()
const currentPage = ref(1)
let size = 12

const searchName = ref('');
searchName.value = route.query.search;
const contentList = await useServerRequest(`clientWeb/column/contentSearch/${currentPage.value}/${size}?search=${searchName.value}`);

const numTotal = contentList.total
const pageTotal = Math.ceil(numTotal / 12)

// useHead({
//     title: 'search',
//     meta: [
//         { name: 'keywords', content: '' },
//         { name: 'description', content: '' },
//     ]
// })

const goto = (e) => {
    window.location.href = `/search?search=${searchName.value}`
}
</script>

<style scoped>
</style>